<template>
  <div class="tolist">
    <h1>待办事项</h1>
      <ul >
        <li v-for="item in todolist">
          <span>{{item.id}}</span>
           <span>{{item.title}}</span>
           <button @click="toSendItem(item)">完成{{item.isDone}}</button>
           <button @click="toDel(item.id)">删除</button>
        </li>
      </ul>
  </div>
</template>
<script setup>
  import {ref,defineExpose} from 'vue'
  import mitt from '@/utils/mitter'
  // todolist--数据结构  {id:"时间戳", title:"任务名称",isDone:是否完成}
  let todolist=ref([
 
])
  // 子组件的添加方法  预留给父组件调用
  let addTodo=(item)=>{
     todolist.value.push(item) //添加父组件传来的任务数据
  }
  defineExpose({
    addTodo
  })
  // 删除
  let toDel=(id)=>{
     todolist.value.forEach((item,index)=>{
        if(item.id===id){ //根据点击行的id 找到要删除的索引
          todolist.value.splice(index,1)
        }
     })
  }
  // 完成
  let toSendItem=(item)=>{
        // mitt传送数据
        // mitt.emit("事件名","数据")
        let myitem=JSON.parse(JSON.stringify(item))//深拷贝
        myitem.isDone=true;
        mitt.emit("sendItem",myitem) //触发事件，并给兄弟组件传值数据
        toDel(myitem.id) //完成内容 从未完成中删除
  }
  // 监听事件触发 并存储列表
  mitt.on("sendNoDone",(item)=>{
    // 把兄弟组件传来的未完成的值 添加到列表
    todolist.value.push(item)
  })
</script>
<style lang="scss" scoped>
    .tolist{
      width: 550px;
      height: 400px;
      background: skyblue;
      ul{
        list-style: none;
           width: 500px;
          li{
          display: flex;
          height: 60px;
          line-height: 60px;
          justify-content: space-around;
          margin-top: 10px;
          }
      }
    }
</style>